<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!-- 组件实例对象 -->
            <cpn></cpn>
            <cpn></cpn>
            <cpn></cpn>
        </div>
        <template id="cpn">
            <div>
                <h2>当前计数：{{counter}}</h2>
                <button @click="increment">+</button>
                <button @click="decrement">-</button>
            </div>

        </template>
        <script src="../js/vue.js"></script>
        <script>
            /**
                ## 为什么组件中的data必须是函数呢？
                    1. 组件的目的是可复用，如果data是一个对象，那么每次返回的其实都是一个对象
                        就会导致所有的组件对象都共享同一个data域，导致数据冲突
                    2. 写成函数的形式，每次调用都会返回一个新的对象，每个组件都有自己的data域，防止数据冲突
            */

            // 1. 注册组件
            Vue.component('cpn', {
                template: '#cpn',
                data() {
                    return{
                        counter: 0
                    }
                },
                methods: {
                    increment() {
                        this.counter = this.counter + 1
                    },
                    decrement() {
                        this.counter = this.counter - 1
                    }
                },
            })

            const app = new Vue({
                el: '#app',
                data: {
                    message: '你好啊'
                },
            })
        </script>
    </body>
</html>